<script setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useUserStore } from '@/store/user'
import { getHistoryListApi } from '@/apis/history'
import { Search } from '@element-plus/icons-vue'
import { searchHistoryApi } from "@/apis/history"
import { useRouter } from 'vue-router'

const router = useRouter()
const userStore = useUserStore()

// #region 搜索代码
const searchValue = ref('')
const searchList = ref([])
const searchIsNull = ref(false)
const inputRef = ref(null)

/* 搜索历史记录 */
const handleSearch = async () => {
  console.log(11);

  if (searchValue.value === '') {
    /* 放搜索列表为空，显示全部历史记录 */
    searchList.value = []
    return
  }
  const res = await searchHistoryApi(userStore.userInfo.id, searchValue.value)
  searchList.value = res.records
  /* 如果等于0，就说明搜索了，但是没有搜索到结果 */
  searchIsNull.value = res.total === 0
}

/* 监控，当searchValue为空时，清空searchList */
watch(searchValue, () => {
  if (searchValue.value === '') {
    searchList.value = []
    searchIsNull.value = false
    //让他重新获得焦点，提高用户体验
    setTimeout(() => {
      if (inputRef.value) {

        inputRef.value.focus()
      }

    }, 100)
  }
})


// #endregion

// #region 获得今天历史记录列表方法和数据

const todayHistoryList = ref([])
const getTodayHistoryList = async () => {
  const res = await getHistoryListApi(userStore.userInfo.id, "1")
  todayHistoryList.value = res.records
}
// #endregion

// #region 获得近七天历史记录列表方法和数据

const sevenDayHistoryList = ref([])
const getSevenDayHistoryList = async () => {
  const res = await getHistoryListApi(userStore.userInfo.id, "2")
  sevenDayHistoryList.value = res.records
}
// #endregion

// #region  历史跳转代码
const handleHistorySelect = (id) => {
  router.push('/postDetail/' + id)
}

// #endregion

// #region  适配双端的动态宽度
/* 照片宽度 */
const pictureWidth = computed(() => {
  return window.innerWidth < 768 ? 6 : 2
})

/* 内容宽度 */
const contentWidth = computed(() => {
  return window.innerWidth < 768 ? 18 : 22
})
// #endregion



onMounted(async () => {
  await getTodayHistoryList()
  await getSevenDayHistoryList()
})
</script>

<template>
  <div class="history-container" v-if="searchList.length === 0">
    <div class="search">
      <el-input class="input" v-model="searchValue" placeholder="搜索" clearable :prefix-icon="Search"
        @keyup.enter="handleSearch"></el-input>
      <el-button class="button" type="primary" @click="handleSearch">搜索</el-button>
    </div>
    <!-- 搜索框 -->
    <template v-if="!searchIsNull">

      <el-timeline>
        <el-timeline-item timestamp="今天" placement="top" color="skyblue">
          <!-- 今日的历史列表 -->
          <ul class="content">
            <li @click="handleHistorySelect(item.postId)" v-for="item in todayHistoryList" :key="item.id">
              <el-row>
                <el-col :span="pictureWidth">
                  <img v-if="item.picture" :src="item.picture" class="image" alt="暂无图片">
                  <img v-else src="@/assets/images/zwtp.webp" class="image" alt="暂无图片">
                </el-col>
                <el-col :span="contentWidth">
                  <span>{{ item.postTitle }}</span>
                  <p>{{ item.browseTime ? item.browseTime.split(' ')[1].slice(0, 5) : '' }}</p>
                </el-col>
              </el-row>
            </li>
          </ul>

        </el-timeline-item>

        <!-- 近七天的历史列表 -->
        <el-timeline-item timestamp="近七天" placement="top">
          <ul class="content">
            <li @click="handleHistorySelect(item.postId)" v-for="item in sevenDayHistoryList" :key="item.id">
              <el-row>
                <el-col :span="pictureWidth">
                  <img v-if="item.picture" :src="item.picture" class="image" alt="暂无图片">
                  <img v-else src="@/assets/images/zwtp.webp" class="image" alt="暂无图片">
                </el-col>
                <el-col :span="contentWidth">
                  <span>{{ item.postTitle }}</span>
                  <p>{{ item.browseTime }}</p>
                </el-col>
              </el-row>
            </li>
          </ul>

        </el-timeline-item>
      </el-timeline>

    </template>
    <template v-else>
      <!-- 留空 -->
      <div style="height: 100px;"></div>
      <el-empty image-style="color: #f56c6c;" :image-size="300" description="没有搜索到相关记录"></el-empty>
    </template>

  </div>

  <div v-else class="history-container">

    <!-- 搜索框 -->
    <div class="search">
      <el-input class="input" v-model="searchValue" placeholder="搜索" clearable :prefix-icon="Search"
        @keyup.enter="handleSearch" ref="inputRef"> </el-input>
      <el-button class=" button" type="primary" @click="handleSearch">搜索</el-button>
    </div>

    <!-- 今日的历史列表 -->
    <ul class="content">
      <li @click="handleHistorySelect(item.postId)" v-for="item in searchList" :key="item.id">
        <el-row>
          <el-col :span="pictureWidth">
            <img v-if="item.picture" :src="item.picture" class="image" alt="暂无图片">
            <img v-else src="@/assets/images/zwtp.webp" class="image" alt="暂无图片">
          </el-col>
          <el-col :span="contentWidth">
            <span>{{ item.postTitle }}</span>
            <p>{{ item.browseTime ? item.browseTime.split(' ')[1].slice(0, 5) : '' }}</p>
          </el-col>
        </el-row>
      </li>
    </ul>

  </div>
</template>

<style lang='scss' scoped>
.history-container {
  min-height: 100vh;
  background: white;
  padding: 100px 10px 10px 30px;

  /* 历史列表 */
  .content {
    margin-top: 10px;

    .image {
      height: 80px;
      width: 90px;
    }

    & li {
      font-size: 1.4rem;
      margin-top: 15px;
      // white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      border-bottom: 1px solid rgb(216, 216, 216);
      // height: 80px;

      & p {

        color: $no-highlight-color;
        font-size: 14px;
        position: absolute;
        bottom: 0;
        right: 0;

      }

      &:hover {
        background-color: rgba(176, 177, 177, 0.14);
        cursor: pointer;
      }
    }
  }
}

/* 电脑端样式 */
@media screen and (min-width: 768px) {


  .search {
    display: flex;
    justify-content: end;

    .input {
      width: 20%;
      margin-right: 5px;
    }
  }

}

/* 手机端样式 */
@media screen and (max-width: 768px) {

  .search {
    display: flex;
    justify-content: end;

    .input {
      width: 50%;
      margin-right: 5px;
      margin-bottom: 20px;
    }
  }
}
</style>